var data = [{
    img:"img/s1.png",
    price:"2899",
    name:"魅族18s",
    goodsId:"s1"
},{
    img:"img/s2.png",
    price:"369.00",
    name:"POP Pro 主动降噪耳机",
    goodsId:"s2"
},
  {
        img:"img/s3.jpg",
        price:"569",
        name:"PANDAER 全家桶",
        goodsId:"s3"
},{
        img:"img/s4.png",
        price:"799",
        name:"PANDAER X IQUNIX键盘",
        goodsId:"s4"
}
];

class GoodsList{
//1.构造函数
    constructor(){
        this.data = data;
        this.shop = document.querySelector(".box");
    }
    //2.事件绑定
    init(){
//3.准备一个空字符串
        var str = "";
        for(var i = 0;i<this.data.length;i++){
//4.通过遍历商品数组,把商品属性添加到空数组中
            str += `<li class="goods" index="${this.data[i].goodsId}">
                            <h3>${this.data[i].name}</h3>
                            <p>${this.data[i].price+'元'}</p>
                            <a href="#"><img src="${this.data[i].img}" alt=""></a>
                            <input type="button" value="加入购物车" class="add">
                     </li>`
        }
//5.把商品添加后在大框中显示
        this.shop.innerHTML = str;
    }
//7.准备点击购买商品时,把数据本地储存
//7.1因为事先大框中没有input元素,现在我们需要点击购买按钮,所以需要事件委托的方法
    addEvent(){
        var that = this;
        this.shop.onclick = function(eve){
            var e = eve || window.event;
            var tar = e.target ||e.srcElement;
//7.2判断如果选择到input元素,获取它的父元素的属性“index";
            if(tar.className == "add"){

                that.goodsId = tar.parentNode.getAttribute("index");
//7.3开始进行本地存储数据
                that.setData();
            }
        }
    }

//8.本地存储数据
    setData(){
//8.1读取goodsMsgs数据
        var gm = localStorage.getItem("goodsMsg");
//8.2判断本地是否有这个数据（数据所在的数组）,没有那么就存储
        if(gm == null){
//8.3没有就创建
            gm = [{
                goodsId:this.goodsId,
                num:1,
                msg:this.getData(this.goodsId)
            }]
        }
        else{
//8.4把数组json变成对象类型,方便直接获取属性
            gm = JSON.parse(gm);
            var zhuangtai = 0;
//8.5判断存入的数据是否在数组中有,有的话加数量,没有的话把这个数据放到数组中
            for(var i = 0;i<gm.length;i++){
                if(gm[i].goodsId == this.goodsId){
                    gm[i].num++;
                    zhuangtai = 1;
                    break;
                }
            }
//8.6 表示数组中没有此数据,添加进去
            if(zhuangtai == 0){
                gm.push({
                    goodsId:this.goodsId,
                    num:1,
//8.7 通过传入的goodsid在getData()方法中,如果传入的数据=对应数据的id,那么就把对应的数据拿过来
                    msg:this.getData(this.goodsId)
                })
            }
        }
        //9.以上这个if里面只是在判断操作获取到的数据，并没有存回去，所以最终操作完之后，需要将数据存到本地存储中
        localStorage.setItem("goodsMsg",JSON.stringify(gm));
    }

//主要的作用是可以通过点击对应商品,获取商品id,然后遍历整个数据然后找到对应id所贮备的数据
//单独封装为了方便获取所有数据中，某个数据的功能
//根据传入的id获取
    getData(id){
        //遍历的时候，比较，符合，返回这个数据(判断是否有这个数据)
        for(var i = 0;i<this.data.length;i++){
            if(this.data[i].goodsId ==id){
                return this.data[i];
            }
        }
        //没有符合，返回空对象，保持数据格式一致
        return {};
    }
}
var gl = new GoodsList();
gl.init();
gl.addEvent();

//搜索框
function get(){
    $(".show").children().remove();
    $(".box .goods h3").each(function (index,ele){
        if($(this).text() == $("#a").val()){
            // console.log($(this).text());
            // console.log($("#a").val());
            $(this).parent().clone().appendTo($(".show"));
            $(".show").css('display','block');
            $(".content").css('display','none');
        }
    })
}